import { Card, message } from 'antd'
import { UserOutlined } from '@ant-design/icons';
import { Button, Form, Input, Checkbox } from 'antd';
import logo from '@/assets/logo.png'
import './index.scss'
import { useStore } from '@/store';
import { useNavigate } from 'react-router';
// 导入observer方法
import { observer } from 'mobx-react-lite'


const Login = () => {
  const navigate = useNavigate()
  const { loginStore } = useStore();
  const onFinish = async (values) => {
    console.log('Received values of form: ', values);
    const {mobile, code} = values;
    try {
      await loginStore.login({ mobile,code });
      navigate('/layout/home', { replace: true })
      message.success('登录成功')
    } catch (e) {
      message.error(e.response?.data?.message || '登陆失败');
    }
  };

  return  <div className="login">
    <Card className="login-container">
      <img className="login-logo" src={logo} alt="" />
      {/* 登录表单 */}
      <Form
      name="normal_login"
      className="login-form"
      initialValues={{
        mobile: '13911111111',
        code: '246810',
        // mobile: '13811111111',
        // code: '246810',
        remember: true
      }}
      validateTrigger={['onBlur', 'onChange']}
      onFinish={onFinish}
    >
      <Form.Item
        name="mobile"
        rules={[
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号码格式不对',
            validateTrigger: 'onBlur'
          },
          {
            required: true,
            message: '请输入手机号!',
          },
        ]}
      >
        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入手机号" />
      </Form.Item>
      <Form.Item
        name="code"
        rules={[
          { len: 6, message: '验证码6个字符', validateTrigger: 'onBlur' },
          { required: true, message: '请输入验证码' }
        ]}
      >
        <Input size="large" placeholder="请输入验证码" maxLength={6} />
      </Form.Item>
      <Form.Item name="remember" valuePropName="checked">
        <Checkbox className="login-checkbox-label">
          我已阅读并同意「用户协议」和「隐私条款」
        </Checkbox>
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit" size="large" block>
          登录
        </Button>
      </Form.Item>
    </Form>
    </Card>
  </div>
}
export default observer(Login)